<template>
  <div class="new-activity-page">

    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <span @click="$router.push('/newCustomerActivity')" class="el-breadcrumb__inner is-link">Activity</span>
      <span>/</span>
      <span role="link" class="el-breadcrumb__inner">new</span>
    </el-breadcrumb>
    <div class="container-padding">
      <el-form label-position="top" :rules="activityRules" :model="Form" ref="ruleForm" size="mini"
               v-loading.fullscreen.lock="fullscreenLoading">
        <el-form-item label="Status" style="width: 200px;" prop="statusId">
          <el-select style="width: 200px" v-model="Form.statusId" :value="Form.statusId" placeholder="" disabled>
            <el-option v-for="item in statusOption" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Activity Time" style="width: 200px;" prop="date">
          <el-date-picker
            style="width:200px;"
            v-model="Form.date"
            type="date"
            placeholder=""
            disabled
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="Activity Type" style="width: 200px;" prop="activityTypeId">
          <el-select style="width: 200px" v-model="Form.activityTypeId" :value="Form.activityTypeId" placeholder=""
                     disabled>
            <el-option v-for="i in activityTypeOption" :key="i.value" :label="i.text" :value="i.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="Objective" prop="type">
          <div>
            <el-checkbox-group v-model="Form.type" disabled>
              <el-checkbox label="1" name="type" style="margin-right: 30px">Introduction</el-checkbox>
              <el-checkbox label="2" name="type">Make appointment</el-checkbox>
              <el-checkbox label="3" name="type">Software installation</el-checkbox>
              <el-checkbox label="4" name="type">Training</el-checkbox>
              <el-checkbox label="5" name="type">Software troubleshooting</el-checkbox>
              <el-checkbox label="6" name="type">Complaint</el-checkbox>
              <el-checkbox label="8" name="type">Data update</el-checkbox>
              <div class="other" style="width: 300px">
                <el-checkbox label="7" name="type">Others</el-checkbox>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder=""
                  v-model="Form.otherObjectives"
                  disabled>
                </el-input>
              </div>
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="Notes" style="width: 300px;">
          <el-input
            type="textarea"
            :rows="4"
            placeholder=""
            v-model="Form.notes"
            disabled>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {userActivityDetail} from '../../api/guc_api.js'

  export default {
    name: 'newCustomerActivity',
    data() {
      return {
        Form: {
          id: '',
          landlordId: '',
          statusId: '',
          date: '',
          activityTypeId: '',
          type: [],
          notes: '',
          otherObjectives: '',

        },
        statusOption: [
          {
            value: 1,
            label: "Active"
          },
          {
            value: 2,
            label: "Deleted"
          }
        ],
        activityTypeOption: [
          {
            value: 1,
            text: "Call"
          },
          {
            value: 2,
            text: "Visit"
          },
          {
            value: 3,
            text: "Received call"
          },
        ],
        activityRules: {
          statusId: [
            {type: 'number', required: true, message: 'Please Select', trigger: 'change'}
          ],
          activityTypeId: [
            {type: 'number', required: true, message: 'Please Select', trigger: 'change'}
          ],
          type: [
            {type: 'array', required: true, message: 'Please Select', trigger: 'change'}
          ],
          date: [
            {type: 'date', required: true, message: 'Please Select', trigger: 'change'}
          ],
        },
        fullscreenLoading: false
      }
    },
    methods: {
      initForm() {
        this.fullscreenLoading = true
        let params = {id: this.Form.id}
        userActivityDetail(params).then(res => {
          this.fullscreenLoading = false
          if (res.data.errorID === 0) {
            let obj = res.data.object
            this.Form.statusId = obj.status
            this.Form.date = new Date(obj.activityTime)
            this.Form.activityTypeId = obj.activityType
            this.Form.notes = this.$translateLang(obj.content||'', 'unicodeTozawgyi')||'';
            //初始化复选框，字符串变数组
            this.Form.type = obj.objectives.split(',')
            this.Form.otherObjectives = this.$translateLang(obj.otherObjective||'', 'unicodeTozawgyi')||''
          }
          else {
            this.messageToastErr(res.data.message)
          }
        })
          .catch(res => {
            this.fullscreenLoading = false
            console.log(res)
          })
      },
    },
    mounted() {
      this.Form.landlordId = this.$route.query.landlordId;
      if (this.$route.query.id) {
        this.Form.id = this.$route.query.id || '';
        this.initForm()
      }
      else {
        this.Form.date = new Date()
      }
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6 !important;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .container-padding {
    padding: 0 40px;
  }

  .new-activity-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
